<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb style="margin-top: 10px; margin-bottom: 20px; margin-left: 25px;">
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>疫情通知管理</el-breadcrumb-item>
    </el-breadcrumb>


    <!--卡片区域-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="7" style="margin-bottom: 20px;">
          <el-input v-model="title" placeholder="请输入疫情通知的标题来进行查询" clearable @clear="clearSelect()">
            <el-button slot="append" icon="el-icon-search" @click="selectByTitle(title)"></el-button>
          </el-input>
        </el-col>
        <!--添加用户按钮-->
        <el-col :span="4">
          <el-button type="primary" @click.native.prevent="AKVisible = true">发布疫情通知信息</el-button>
          <el-dialog title="发布疫情通知信息" :visible.sync="AKVisible" width="50%" @close="AKDialogClosed()">
            <!--添加添加疫情通知信息对话框的主体-->
            <el-form :model="addNotificationList" label-width="80px" ref="addFormRef">
              <el-form-item label="信息标题" prop="noticeTitle">
                <el-input v-model="addNotificationList.noticeTitle" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="信息内容" prop="noticeContent">
                <el-input type="textarea" :rows="6" v-model="addNotificationList.noticeContent"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="AKVisible = false">取 消</el-button>
              <el-button type="primary" @click.native.prevent="addNotification(addNotificationList)">提 交</el-button>
            </span>
          </el-dialog>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="NotificationList.slice((pagenum - 1) * pagesize, pagenum * pagesize)" :border="true" stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="通知标题" prop="noticeTitle"></el-table-column>
        <el-table-column label="上传人" prop="uploadPerson"></el-table-column>
        <el-table-column label="上传时间" prop="uploadTime"></el-table-column>
        <el-table-column label="修改人" prop="updatePerson"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateNotification(scope.row)"></el-button>
            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click.native.prevent="deleteNotificationById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--修改通知信息对话框-->
      <el-dialog v-model="setNotificationList" :title=setNotificationList.noticeTitle :visible.sync="UKVisible"
        @close="testa = false">
        <el-form ref="UKform" :model="setNotificationList">
          <el-form-item label="信息标题">
            <el-input v-model="setNotificationList.noticeTitle" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="信息内容">
            <el-input type="textarea" autosize v-model="setNotificationList.noticeContent"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="margin-top: -40px;">
          <el-button @click="UKVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitNotification">修改</el-button>
        </div>
      </el-dialog>

      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
        :page-sizes="[1, 2, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="margin-top: 10px; text-align: center">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
const formData = new FormData()
import {
  AddNotificationInfoAPI,
  GetNotificationInfoListAPI,
  RemoveNotificationInfoAPI,
  UpdateNotificationInfoAPI,
} from '@/components/utils/api/notice_api.js'

import { postImage } from '@/components/utils/api/sysfile_api.js'
export default {
  data() {
    return {
      testa: false,
      annexId: '',
      params: {},
      isClearOtherFiles: '0',
      title: '',
      AKVisible: false,
      UKVisible: false,
      NotificationList: [],
      setNotificationList: {},
      addNotificationList: {},
      total: 0,
      pagesize: 10,
      pagenum: 1,
    }
  },
  created() {
    this.getNotificationList()
  },
  methods: {

    beforeUpload(file) {
      if (file) {
        formData.append('afiles', file)
      }
      else {
        console.log("6")
      }
    },

    upload() {
      postImage(formData).then(res => {
        res.data.data.forEach(element => {
          this.params.annexId = element.id
        });
        this.params.id = this.setNotificationList.id
        this.params.noticeTitle = this.setNotificationList.noticeTitle
        this.params.noticeContent = this.setNotificationList.noticeContent
        this.params.isClearOtherFiles = this.isClearOtherFiles
        UpdateNotificationInfoAPI(this.params).then(res1 => {
          if (res1.data.code == 200) {
            this.$message.success("修改成功")
            this.UKVisible = false
          }
          else {
            this.$message.error("修改失败")
          }
          this.getNotificationList()
        })
      })
    },

    //获取通知疫情信息
    getNotificationList() {
      GetNotificationInfoListAPI({}).then(res => {
        console.log(res.data.data)
        this.NotificationList = res.data.data
        this.total = this.NotificationList.length
      })
    },

    selectByTitle(title) {
      var params = {
        noticeTitle: title
      }
      GetNotificationInfoListAPI(params).then(res => {
        console.log(res.data.data)
        this.NotificationList = res.data.data
        this.total = this.NotificationList.length
      })
    },

    //添加通知疫情信息
    addNotification(form) {
      AddNotificationInfoAPI(form).then(res => {
        if (res.data.code == 200) {
          this.AKVisible = false
          this.$message.success(res.data.message)
          this.AKDialogClosed()
        } else {
          this.$message.error(res.data.message)
        }
        this.getNotificationList()
      })
    },

    // 清空搜索
    clearSelect() {
      this.NotificationList = []
      this.getNotificationList()
    },

    //清空添加信息框
    AKDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },


    //删除通知疫情信息
    deleteNotificationById(id) {
      var params = {
        id: id
      }
      RemoveNotificationInfoAPI(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
        }
        this.getNotificationList()
      })
    },

    //修改疫情通知信息
    updateNotification(information) {
      this.UKVisible = true
      this.setNotificationList = information
      this.annexId = information.annex[0].id
    },

    //提交修改后的疫情通知信息
    submitNotification() {
      if (this.testa == true) {
        this.$refs.uploadBox.submit()
      }
      else {
        this.params.id = this.setNotificationList.id
        this.params.noticeTitle = this.setNotificationList.noticeTitle
        this.params.noticeContent = this.setNotificationList.noticeContent
        this.params.isClearOtherFiles = this.isClearOtherFiles
        UpdateNotificationInfoAPI(this.params).then(res1 => {
          if (res1.data.code == 200) {
            this.$message.success("修改成功")
            this.UKVisible = false
          }
          else {
            this.$message.error("修改失败")
          }
          this.getNotificationList()
        })
      }
    },

    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.pagesize = newSize
    },

    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.pagenum = newPage
    },
  }
}
</script>